<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

  <script type="text/javascript">
    //jquery stuff
    $(function() {
      //init
      $("#login-button").hide();
    })

    var UserInfo = new Object();
    UserInfo.uid = 1234;
    UserInfo.score = 0;
    UserInfo.name = 'Piased D';
    UserInfo.level = 1;

  </script>
</head>

<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '159760274050584',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });

    FB.Event.subscribe('auth.sessionChange', function(response) {
      if (response.status == "connected") {
          getMe();
          $("#login-button").hide();
      } 
      else if (response.status == "notConnected") {
          $("#login-button").show();
      }
    });

    FB.getLoginStatus(checkStatus);
  };

  function checkStatus(response) {
    if (response.status == "connected") {
        getMe();
        $("#login-button").hide();
    } 
    else if (response.status == "notConnected") {
        $("#login-button").show();
    }
  }

  function getMe() {
    FB.api('/me', function(response) {
        $("#info").html(response.name);
        UserInfo.uid = response.id;
        getUserInfo();
    });
  }

  function getUserInfo() {
    var uid = UserInfo.uid;
    var uname = UserInfo.name;
    $.ajax({
       type: "GET",
       url: "/put?uid=" + uid,
       dataType: "json",
       success: function(msg) {
         $("#info").append("success getUserinfo: uid=" + msg.uid + " score= " + msg.score + " name= " + msg.name + "<br>");
          UserInfo=msg;
          //if no such user is present, indicated by uid==0, reset the uid to what we got from FB
          if(UserInfo.uid == 0) {
            UserInfo.uid = uid;
            UserInfo.name = uname;
          }
       },
       error: function(msg) {
         $("#info").append("error getUserinfo " + msg + "<br>");
       }
     });
  }

  function postUserInfo() {
    UserInfo.score += 100;
    $.ajax({
       type: "POST",
       url: "/put",
       data: JSON.stringify(UserInfo),
       success: function(msg) {
         $("#info").append("success postUserinfo " + msg + "<br>");
       },
       error: function(msg) {
         $("#info").append("error postUserinfo " + msg + "<br>");
       }
     });
  }

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

<button onClick="javascript: getUserInfo();">getUserInfo</button>
<button onClick="javascript: postUserInfo();">postUserInfo</button>

<div id="info">
info
</div>

<div id="login-button">
  <fb:login-button></fb:login-button>
</div>

</body>
</html>
